<template>
	<div class="p p3">
		<h1 :class="['title',{'animate__animated animate__bounceInRight':index==3}]">项目经历</h1>
		<div class="p3context">
			<transition-group name="jz" class="transitionbox">
				<div v-if="fshow" :class="['first']" v-for="(item,index) in myshow"
					:key="index">
					<div class="head">
						<div class="out"><span class="in"></span></div>
						<h2>{{item.name}}</h2>
						<p>{{item.time}}</p>
					</div>
					<div class="inner">
						{{item.context}}<br>
						<span>责任描述</span>
						<ol type="1">
							<li v-for="(i,j) in item.work" :key="j">{{i.c}}</li>
						</ol>
					</div>
				</div>
			</transition-group>
		</div>
	</div>
</template>

<script>
	import showme from '../js/showme.js'
	export default {
		data() {
			return {
				show: false,
				i: 0,
				myshow: []
			}
		},
		methods: {

		},
		props: ["index","fshow"],
		mounted() {
			this.myshow = showme.context
			if (this.index == 3) {
				this.show = !this.show
			}
		}
	}
</script>

<style>
	.jz-enter,
	.jz-leave-to {
		opacity: 0;
		transform: translateY(600px);
	}

	.jz-enter-to,
	.jz-leave {
		opacity: 1;
		transform: translateY(0px);
	}

	.jz-enter-active,
	.jz-leave-active {
		transition: all 2s ease;
	}

	.p3 {
		background-color: #333333;
		color: white;
		text-align: left;
		position: relative;
	}

	.p3>.title {
		position: absolute;
		left: 50%;
		top: 50%;
		margin-top: -400px;
		margin-left: 0px;
	}

	.p3>.p3context {
		padding: 25px;
		overflow: hidden;
		position: absolute;
		left: 50%;
		top: 50%;
		margin-top: -300px;
		margin-left: -300px;
	}

	.p3>.p3context>.transitionbox {
		color: white;
	}

	.jz-enter-active:nth-child(2) {
		transition-delay: .5s;
	}

	.jz-enter-active:nth-child(3) {
		transition-delay: 1s;
	}

	.p3>.p3context .first {
		margin: 5px 35px 50px;
	}

	.p3>.p3context .first .head {
		position: relative;
		margin-bottom: 10px;
	}

	.p3>.p3context .first>.head>h2 {
		position: absolute;
		top: 2px;
		left: 50px;
	}

	.p3>.p3context .first .head>p {
		position: absolute;
		top: 6px;
		right: 50px;
	}

	.p3>.p3context .first .head>.out {
		width: 30px;
		height: 30px;
		border: 3px white solid;
		border-radius: 50%;
		text-align: center;
		line-height: 26px;
	}

	.p3>.p3context .first .head>.out>.in {
		display: inline-block;
		width: 8px;
		height: 8px;
		background-color: #66B1FF;
		border-radius: 50%;
	}

	.p3>.p3context .first .inner{
		border-left: 4px solid #3A8EE6;
		border-radius: 3px;
		padding-left: 10px;
		margin-left: 15px;
	}
	
	.p3>.p3context .first .inner ol>li {
		list-style-type: decimal;
		list-style-position: inside;
	}

	.p3context span {
		color: #66B1FF;
	}
</style>
